<template>
	<view>
		<customHeader>
			<template v-slot:bg>
				<image class="head-bg" src="../../static/image/version/headBg.png"></image>
			</template>
			<template v-slot:left>
				<view class="locations">
					<image src="../../static/image/version/location.png"></image>
					<text>解放西路</text>
					<view v-if="getChecks.length" @click="delShop">删除选中</view>
				</view>
			</template>
		</customHeader>
		<view class="boxs-row">
			<view v-if="cartData.length !== 0">
				<view class="shop" v-for="(it, ix) in cartData" :key="ix">
					<view class="circle" :class="{'actives': it.check}" @click.stop="checkRadio(it)">
						<image :src="require('@/userPackage/image/dui.png')" v-if="it.check"></image>
					</view>
					<view class="infod">
						<image :src="it.goods_info.image" @click="openDetail(it)"></image>
						<view>
							<view :class="{'clear-text': it.isTodaySeckill != 2}" @click="openDetail(it)">
								<view v-if="it.goods_info.is_today_seckill == 2">秒杀</view>
								<text>{{ it.goods_info.name }}</text>
							</view>
							<view class="type">{{it.goods_attr.name}}</view>
							<view class="prices">
								<view class="priced">
									<text>￥</text>
									<view>{{it.price}}</view>
								</view>
								<setNum :max="it.goods_info.max_bynum" :dataNum="it.number" :min="it.goods_info.min_bynum" @nums="nums($event,ix, it)"/>
							</view>
						</view>
					</view>
				</view>
			</view> 
			<view v-else class="empty-car">
				<empty title="购物车是空的"/>
			</view>
		</view>
		<view class="fixed-bot">
			<view class="checks" @click="checkCarAll">
				<view :class="{'actives': getAll}">
					<image :src="require('@/userPackage/image/dui.png')" v-if="getAll"></image>
				</view>
				<text>全选</text>
			</view>
			<view class="right-info">
				<view class="lets">
					<view>
						<text>合计:</text>
						<view>
							<text>￥</text>
							<view>{{getTotal}}</view>
						</view>
					</view>
					<!-- <view>免费配送</view> -->
				</view>
				<view class="btn" hover-class="hover_class" @click="goResult">结算（{{getChecks.length}}）</view>
			</view>
		</view>
		<dialogPop cancelTxt="取消" okText="确定"
		 @save="comfirmDel"
		 ref="tipsPop" content="确认删除吗?" title="删除选中商品" />
	</view>
</template>

<script>
import store from '@/store'
import setNum from '@/component/setNum/index.vue'
import {
	userIndex
} from 'utils/api/user.js'

import { calc } from '@/utils/calc.js'
import {cartList, updateCart} from "utils/api/home.js"

export default {
	components: {
		setNum
	},
	data() {
		return {
			cartData: [],
			getAll: false
		}
	},
	onShow() {
		let isLogin = uni.getStorageSync('token')
		if(isLogin) {
			this.getCart()
		}
	},
	computed: {
		getTotal() {
			let total = 0
			this.cartData.forEach((it) => {
				if(it.check) {
					total = calc.jia(total, it.totalPrice)
				}
			})
			return total || 0
		},
		getChecks() {
			return this.cartData.filter((it) => it.check)
		},
	},
	watch: {
		cartData: {
			handler(val) {
				if(this.cartData.length) {
					this.getAll = this.cartData.every((it) => it.check)
				} else {
					this.getAll = false
				}
			},
			deep: true
		}
	},
	methods: {
		// 批量删除
		delShop() {
			this.$refs.tipsPop.open()
		},
		// 确认删除
		comfirmDel() {
			uni.showLoading({
				title: '删除中'
			})
			let proAll = []
			this.getChecks.forEach((item) => {
				proAll.push(updateCart({
					product_id: item.product_id,
					product_attr_id: item.product_attr_id,
					number: 0
				}))
			})
			Promise.all(proAll).then((res) => {
				setTimeout(() => {
					this.getCart()
				}, 300)
			}).finally(() => {
				uni.showToast({
					title: '删除成功',
					icon: 'none'
				})
			})
		},
		getCart() {
			uni.showLoading({
				title: '加载中'
			})
			cartList().then((res) => {
				let list = res.data || []
				list.forEach((it) => {
					const price = Number(it.price)
					it.check = false
					it.totalPrice = calc.cheng(price, it.number)
				})
				this.cartData = list
			}).finally(() => {
				uni.hideLoading()
			})
		},
		// 结算
		async goResult() {
			if(this.getChecks.length === 0) {
				return uni.showToast({
					title: '您还没有选择宝贝哦',
					icon: 'none'
				})
			}
			uni.setStorageSync('cart', JSON.stringify(this.getChecks))
			uni.navigateTo({
				url: `/userPackage/pages/supplierOrder/index`
			})
		},
		// 查看详情
		openDetail(it) {
			uni.navigateTo({
				url: '/managePackage/pages/shopDetail/index?id=' + it.product_id
			})
		},
		checkRadio(it) {
			it.check = !it.check
		},
		// 设置数量
		nums(num, ix, item) {
			updateCart({
				product_id: item.product_id,
				product_attr_id: item.product_attr_id,
				number: num
			}).then((res) => {
				const price = Number(item.price)
				item.number = num
				item.totalPrice = calc.cheng(price, num)
			})
		},
		// 全选
		checkCarAll() {
			this.cartData.forEach((it, ix) => {
				it.check = !this.getAll
			})
		}
	}
}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>